<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>两列/三列布局</title>
  <style>
    .left {
      background-color: pink;
      border: 2px dashed red;

      float: left;
      width: 100px;
    }

    .center {
      border: 3px solid red;
      background-color: aqua;

      overflow: auto; /* 创建BFC */
    }

    .right {
      background-color: palegreen;
      border: 2px dashed red;

      float: right;
      width: 100px;
    }
  </style>
</head>
<body>
<div>
  <div class="left">
    left
  </div>
  <div class="right">
    right
  </div>
  <div class="center">
    center#基于BFC
  </div>
</div>
<div style="display: flex">
  <div style="width: 100px">left</div>
  <div style="flex-grow: 1;background: aqua">center#基于flex-grow:1</div>
  <div style="width: 100px">right</div>
</div>
<div style="display: grid;grid-template-columns: 100px 1fr 100px">
  <div>left</div>
  <div style="background: aqua">center#基于grid-template-columns</div>
  <div>right</div>
</div>
补充：
<ul>
  <li>float + margin-[left/right]</li>
</ul>
<div class="aside"></div>
<div class="main">
  <div class="content"></div>
</div>
</body>
</html>
